<!-- @format -->

<template>
    <div>
        {{ x }},{{ y }}
        <button @click="flag = true">监听坐标</button>
        <button @click="flag = false" style="margin-left: 10px">停止监听</button>
    </div>
</template>

<script setup lang="ts">
import {useMouse} from '@/hooks/useMouse';
const flag = ref(false);
const {x, y, startListening, stopListening} = useMouse();

watch(
    flag,
    val => {
        if (val) {
            startListening();
        } else {
            stopListening();
        }
    },
    {immediate: true},
);
</script>

<style scoped lang="scss"></style>
